<template>
    <div>
        <!-- 文本框 -->
        <template v-if="item.component === 'input'">
            <el-input :value="value" @input="onInput"/>
        </template>

        <!-- 单选框 -->
        <template v-else-if="item.component === 'radio'">
            <el-radio-group :value="value" @input="onInput">
                <el-radio v-for="opt in item.options"
                          :key="opt.value"
                          :label="opt.value">
                    {{ opt.text }}
                </el-radio>
            </el-radio-group>
        </template>

        <!-- 下拉框 -->
        <template v-else-if="item.component === 'select'">
            <el-select :value="item.value" @input="onInput">
                <el-option v-for="opt in item.options"
                           :key="opt.value"
                           :label="opt.text"
                           :value="opt.value"
                />
            </el-select>
        </template>

        <!-- 多选框 -->
        <template v-else-if="item.component === 'checkbox'">
            <el-checkbox-group :value="item.value" @input="onInput">
                <el-checkbox v-for="opt in item.options"
                           :key="opt.value"
                           :label="opt.value"
                >
                    {{ opt.text }}
                </el-checkbox>
            </el-checkbox-group>
        </template>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { ConfigModel } from '@/models/config.model';
import { SystemModule } from '@/store/system';

@Component({ name: 'SettingsComponent' })
export default class SettingsComponent extends Vue {
    @Prop({ type: Object }) readonly item!: ConfigModel;
    @Prop() readonly value!: any;
    @Prop() readonly data!: ConfigModel[];

    onInput(val: any) {
        this.$emit('input', val);
    }
}
</script>
